<template>
    <div class="container valid_password">
        <!-- 左上角关闭按钮 -->

        <!-- 密码提示 -->
        <div class="password-hint">请输入登录密码</div>
        <div class="password-hint">最后四位</div>

        <!-- 输入密码区域 -->
        <!-- :gutter="10" -->
        <span
            class="error_msg"
            :style="{ opacity: errorMsg ? 1 : 0 }"
            >登录密码不正确</span
        >
        <div class="password-input">
            <van-password-input
                v-model="password"
                :length="4"
                :gutter="15"
                :mask="false"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
                @blur="showKeyboard = false" />

            <van-number-keyboard
                v-model="password"
                :show="showKeyboard" />
        </div>
        <div class="btn_get_code">
            <van-button
                :disabled="isInvalid"
                @click="handelNext"
                :color="isInvalid ? '#d1d1d1' : '#1989fa'"
                size="large"
                round>
                下一步
            </van-button>
        </div>
    </div>
</template>

<script>
import { Notify } from 'vant';
export default {
    data() {
        return {
            isInvalid: true,
            password: '',
            showKeyboard: false,
            errorMsg: false, //错误提示
        };
    },
    methods: {
        handelNext() {
            this.$http
                .post('/valid/password', { password: this.password })
                .then(res => {
                    const { success, data, msg } = res.data;
                    // if (success) {
                    // }
                    Notify({ type: success ? 'success' : 'warning', message: msg });
                    success && this.$router.push('/codePhone');
                })
                .catch(err => {
                    this.errorMsg = true;
                });
        },
    },
    watch: {
        password(val) {
            this.isInvalid = true;
            if (val.length === 4) {
                this.isInvalid = false;
            } else if (val.length > 4) {
                this.password = val.substring(0, 4);
            }
        },
    },
};
</script>

<style scoped lang="scss">
.valid_password {
    background-color: #f4f4f4;
    padding-top: 3rem;
}
.password-page {
    position: relative;
}

.close-icon {
    position: absolute;
    top: 12px;
    left: 16px;
    cursor: pointer;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px ½0px;
}

.password-hint {
    text-align: center;
    font-size: 1rem;
}

.user-role {
    text-align: right;
}
.password-input {
    margin: 2rem 3rem;
}
.van-password-input__security li {
    // background-color: #f6f6f6;
    border-radius: 8px;
}
.btn_get_code {
    margin-top: 3rem;
    padding: 0 12px;
}
.van-password-input__item--focus {
    border: 1px solid orange !important;
}
</style>
